<template>
	<view>
		<view class="form padding-lg" v-show="!loading">
			<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel" :crop-fixed="true"></image-cropper>

			<u-form-item label="头像" label-width="140">
				<image @tap="upload('portrait')" class="pic" :src="form.portrait ? form.portrait : '../../static/images/avatar.png'"
				 mode="aspectFit"></image>
			</u-form-item>

			<u-form-item label="logo" label-width="140">
				<image @tap="upload('logo')" class="pic" :src="form.logo ? form.logo : '../../static/images/logo.png'" mode="aspectFit"></image>
			</u-form-item>

			<u-form-item label="姓名" label-width="140" required>
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="职位" label-width="140" required>
				<u-input v-model="form.position" />
			</u-form-item>
			<u-form-item label="公司" label-width="140" required>
				<u-input v-model="form.company" />
			</u-form-item>

			<!-- 电话 -->
			<view>
				<u-form-item label="电话" label-width="140" v-show="!i.delete" v-for="(i,k) in form.mobile" :key="k">
					<u-input v-model="form.mobile[k].val" />
					<view slot="right">
						<u-icon size="40" name="plus-circle" v-show="k==0" color="blue" @click="addMobile"></u-icon>
						<u-icon size="40" name="close-circle" v-show="k!=0" color="red" @click="delMobile(k)"></u-icon>
					</view>
				</u-form-item>
			</view>

			<!-- 邮箱 -->
			<view>
				<u-form-item label="邮箱" label-width="140" v-show="!i.delete" v-for="(i,k) in form.email" :key="k">
					<u-input v-model="form.email[k].val" />
					<view slot="right">
						<u-icon size="40" name="plus-circle" v-show="k==0" color="blue" @click="addEmail"></u-icon>
						<u-icon size="40" name="close-circle" v-show="k!=0" color="red" @click="delEmail(k)"></u-icon>
					</view>
				</u-form-item>
			</view>

			<!-- 地区 -->
			<u-form-item label="地区" label-width="140">
				<u-input :value="form.region" type="select" @click="cityPicker=true" />
			</u-form-item>

			<!-- 地址 -->
			<view>
				<u-form-item label="地址" label-width="140" v-show="!i.delete" v-for="(i,k) in form.address" :key="k">
					<u-input v-model="form.address[k].val" />
					<view slot="right">
						<u-icon size="40" name="plus-circle" v-show="k==0" color="blue" @click="addAddress"></u-icon>
						<u-icon size="40" name="close-circle" v-show="k!=0" color="red" @click="delAddress(k)"></u-icon>
					</view>
				</u-form-item>
			</view>

			<u-picker mode="region" v-model="cityPicker" :params="{ province: true, city: true }" @confirm="cityChoose"></u-picker>

			<!-- 其他 -->
			<u-form-item label="业务简介" label-width="140">
				<u-input v-model="form.business_summary" type="textarea" />
			</u-form-item>

			<!-- 图片列表 -->
			<u-form-item label="图片描述" label-width="140">
				<u-upload ref="picUpload" :action="$store.state.uploadUrl" :show-progress="false" upload-text="上传图片" max-count="8" :header="{Authorization: 'Bearer ' + this.$store.state.token}"
				 :form-data="{type: 'vcard/pic'}" @on-success="picUploadSuccess" :file-list="fileList"></u-upload>
			</u-form-item>
			
			<!-- 视频列表 -->
			<u-form-item label="视频描述" label-width="140">
				<EasyUpload types="video" :upload_max="25" :dataList="form.video" :uploadUrl="$store.state.uploadUrl" :uploadCount="1" @successVideo="videoUploadSuccess" @del="form.video=[]"></EasyUpload>
			</u-form-item>
		</view>

		<view class="margin-tb padding-tb" v-show="!loading">
			<my-btn :width="420" radius @click="saveCard">保存</my-btn>
		</view>
	</view>
</template>

<script>
	import ImageCropper from '@/components/invinbg-image-cropper/invinbg-image-cropper.vue'
	import EasyUpload from '@/components/easy-upload/easy-upload.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tools/index.js'
	export default {
		components: {
			ImageCropper,
			EasyUpload
		},
		data() {
			return {
				loading: true,
				cityPicker: false,
				form: {
					id: '',
					name: '',
					mobile: [],
					email: [],
					address: [],
					position: '',
					company: '',
					region: '',
					portrait: '',
					logo: '',
					business_summary: '',
					pic: [],
					video: []
				},
				cropperType: '',
				tempFilePath: '',
				fileList: []
			};
		},
		onLoad(opt) {
			this.form.id = opt.id
			this.getDetail()
		},
		methods: {
			cityChoose(e) {
				let province = e.province.label
				let city = e.city.label
				this.form.region = [province, city].join('-')
			},
			addMobile() {
				this.form.mobile.push({
					id: '',
					val: '',
					delete: false,
					extra: null,
				})
			},
			addEmail() {
				this.form.email.push({
					id: '',
					val: '',
					delete: false,
					extra: null,
				})
			},
			addAddress() {
				this.form.address.push({
					id: '',
					val: '',
					delete: false,
					extra: null,
				})
			},
			delMobile(e) {
				if (this.form.mobile[e].id) {
					this.form.mobile[e].delete = true
				} else {
					this.form.mobile.splice(e, 1)
				}
			},
			delEmail(e) {
				if (this.form.email[e].id) {
					this.form.email[e].delete = true
				} else {
					this.form.email.splice(e, 1)
				}
			},
			delAddress(e) {
				if (this.form.address[e].id) {
					this.form.address[e].delete = true
				} else {
					this.form.address.splice(e, 1)
				}
			},
			getDetail() {
				if (!this.form.id) {
					this.initForm()
					return
				}
				this.$u.get('/myvcard/detail?id=' + this.form.id).then(res => {
					let vcard = res.data.result.vcard
					let {
						name,
						position,
						company,
						mobile,
						email,
						address,
						region,
						portrait,
						logo,
						business_summary,
						pic,
						video
					} = vcard
					this.form.name = name
					this.form.position = position
					this.form.company = company
					this.form.region = region
					this.form.portrait = portrait
					this.form.logo = logo
					this.form.business_summary = business_summary
					this.form.pic = pic || []
					this.form.video = video || []
					
					this.fileList = this.form.pic.map(item => {
						return {
							url: item
						}
					})

					if (mobile.length) {
						this.form.mobile = mobile
					} else {
						this.addMobile()
					}

					if (email.length) {
						this.form.email = email
					} else {
						this.addEmail()
					}

					if (address.length) {
						this.form.address = address
					} else {
						this.addAddress()
					}

					this.loading = false
				})
			},
			initForm() {
				this.addMobile()
				this.addEmail()
				this.addAddress()
				this.loading = false
			},
			getPic() {
				let list = this.$refs.picUpload.lists.filter(val => {
					return val.progress == 100
				})
				let pic = list.map(item => {
					if (item.response) {
						let { full_src } = item.response.result
						return full_src
					} else {
						return item.url
					}
				})
				return pic
			},
			saveCard() {
				let pic = this.getPic()
				this.form.pic = pic
				this.$u.post('/myvcard/update', this.form).then(res => {
					this.$msg(res.data.msg, 500, true).then(res => {
						this.$goto('/pages/cards/list', 'relaunch')
					})
				})
			},
			upload(type) {
				this.cropperType = type
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
					}
				});
			},
			confirm(e) {
				this.tempFilePath = ''
				// #ifdef MP
				pathToBase64(e.detail.tempFilePath).then(res => {
					if (this.cropperType == 'logo') {
						this.form.logo = res
					} else if (this.cropperType == 'portrait') {
						this.form.portrait = res
					}
				})
				// #endif
				// #ifdef H5
				if (this.cropperType == 'logo') {
					this.form.logo = e.detail.tempFilePath
				} else if (this.cropperType == 'portrait') {
					this.form.portrait = e.detail.tempFilePath
				}
				// #endif
			},
			cancel() {
				console.log('canceled')
			},
			picUploadSuccess(data, index, lists, name) {
				// console.log(data, lists)
			},
			videoUploadSuccess(e) {
				let res = JSON.parse(e.data)
				let { full_src } = res.result
				this.form.video = [full_src]
				this.$msg('上传成功')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.pic {
		width: 125rpx;
		height: 125rpx;
		border: 1px #e6e6e6 solid;
		display: block;
		margin: 8rpx;
		border-radius: 8rpx;
	}

	.u-form-item {
		color: #818181 !important;
	}
</style>
